﻿@{
    ViewBag.Title = "收藏夹";
    Layout = "~/Views/Shared/_Guide.cshtml";

}
@section Styles{
    <link rel="stylesheet" href="~/Scripts/pluins/jstree/themes/default/style.min.css" />
}
<div class="row">
    <div class="col-md-6">
        <p class="bs-component pull-right" style="padding-right:15px;">
            <a href="@Url.Action("AddFolder")" class="btn btn-primary" data-modalid="@(Guid.NewGuid().ToString("N"))" data-toggle="x-modal" onclick="Add(this)"> <i class="fa fa-plus"></i>添加收藏</a>
            <a href="@Url.Action("Edit")" class="btn btn-success" data-modalid="@(Guid.NewGuid().ToString("N"))" data-toggle="x-modal" onclick="Edit(this)" id="btnEdit">编辑收藏</a>
            <a href="@Url.Action("Import")" class="btn btn-primary m-l-xs" data-modalid="@(Guid.NewGuid().ToString("N"))" data-toggle="x-modal">
                <i class="fa fa-plus"> 批量导入</i>
            </a>
        </p>
    </div>
    <div class="col-md-6">
        <div class="bs-component">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" id="search" class="form-control" placeholder="Search" style="min-width: 500px;">
                </div>
                <button type="button" class="btn btn-warning" id="btnSearch">查询</button>
                <label id="lblShow"></label>
            </form>
        </div>
    </div>
</div>

<div class="col-md-4">
    <div class="bs-component">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">收藏夹</h3>
            </div>
            <div class="panel-body" style="height: 700px;overflow-y: auto">
                <div class="text-danger" id="selectShow">当前选择：</div>
                <div id="jstree_div">

                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-8">
    <div class="bs-component">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">列表</h3>
            </div>
            <div class="panel-body">
                <div class="row" id="searchBody">
                    @Html.Action("search")
                </div>
            </div>
        </div>
    </div>
</div>


@section Scripts{

    <script src="~/Scripts/pluins/jstree/jstree.min.js"></script>
    <script src="~/Scripts/custom/model.custom.js"></script>
    <script type="text/javascript">
        var selectedId = "";
        var selectedText = "";
        $(function () {
            var control = $('#jstree_div');
            control.data('jstree', false); //清空数据，必须

            $.getJSON('/guide/tree/',
                function (data) {
                    console.log(data);
                    control.jstree({
                        'core': {
                            'data': data.result,
                            "themes": {
                                "responsive": false
                            }
                        }
                    });
                    control.on("changed.jstree",
                        function (e, data) {
                            selectedId = data.node.id;
                            selectedText = data.node.text;
                            $("#selectShow").html("当前选择：" + selectedText);
                            renderTable("", selectedId);
                        });
                });

            $("#btnSearch").bind("click",
                function () {
                    var search = $("#search").val();
                    renderTable(search, "");
                });


        });

        function renderTable(search, pid) {
            $("#searchBody").html("");
            var queryUrl = "/guide/search?";
            if (pid != "" && search != "") {
                queryUrl += "search=" + search + '&pid=' + pid;
            }else if (search != "") {
                queryUrl += "search=" + search;
            } else if (pid != "") {
                queryUrl += "pid=" + pid; 
            }
            $("#lblShow").text("查询中.....");
            $.get(queryUrl,function (data) {
                $("#searchBody").html(data);
                $("#lblShow").text("查询完毕");
                });
        }

        function Add(e) {
            var href = "/guide/AddFolder?pid=" + selectedId;
            $(e).attr("href", href);

        }

        function Edit(e) {
            if (selectedId != "") {
                var href = "/guide/edit?id=" + selectedId;
                $(e).attr("href", href);
            } else {
                alert("请选中一个选项");
            }
        }

        function EditRow(id) {
            selectedId = id;
            //var href = "/guide/edit?id=" + id;
            //$("#btnEdit").attr("href", href);
            $("#btnEdit").click();
        }
    </script>
}

